<template>
	<view class="contant">
		<view class="vote"></view>
		<view style="position: relative; z-index: 9; margin-bottom: 50px">
			<u-sticky offset-top="0">
				<view :class="[art == 1 ? 'tops' : '']">
					<!-- #ifdef APP -->
					<view style="height: 44px"></view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view style="height: 10px"></view>
					<!-- #endif -->
					<view
						class="flex"
						style="
							width: 164px;
							height: 34px;
							margin: auto;
							background: #d2dcff;
							border-radius: 22px;
							line-height: 34px;
							justify-content: center;
						"
					>
						<view
							@click="btn(1)"
							:class="current == 1 ? 'name' : ''"
							style="
								width: 72px;
								height: 26px;
								font-size: 13px;
								font-weight: bold;
								color: #333;
								line-height: 26px;
								text-align: center;
							"
						>
							我的报表
						</view>
						<view
							@click="btn(2)"
							:class="current == 2 ? 'name' : ''"
							style="
								width: 72px;
								height: 26px;
								font-size: 13px;
								font-weight: bold;
								color: #333;
								line-height: 26px;
								text-align: center;
							"
						>
							团队报表
						</view>
					</view>
				</view>
			</u-sticky>
			<view style="padding: 15px; padding-top: 30px">
				<view v-if="current == 1">
					<view class="topbox">
						<image class="topbox-bcg" src="@/static/image/4-1.png"></image>
						<view class="topbox-name">
							{{ '我的报表' }}
						</view>
						<view
							class="center"
							style="
								font-size: 13px;
								font-family: PingFang SC;
								font-weight: 400;
								color: #ffffff;
								line-height: 35px;
								margin-top: 18px;
								margin-left: 17px;
							"
						>
							<view>累计佣金(元）</view>
							<view style="font-size: 28px; margin-left: 10px">{{ rep_info.allCommission }}</view>
							<view>本月佣金(元）{{ rep_info.monthCommission }}</view>
						</view>
						<view class="bottom">
							<view class="item">
								<view>项目</view>
								<view>汇总</view>
							</view>
							<view class="item">
								<view>结算数量</view>
								<view>{{ rep_info.num }}单</view>
							</view>
							<view class="item">
								<view>佣金补贴</view>
								<view>¥{{ rep_info.sumCommission }}</view>
							</view>
						</view>
					</view>

					<view class="flex" style="justify-content: space-between; margin-top: 30px">
						<view style="font-size: 16px; font-weight: bold; color: #1d1f20">我的报表</view>
						<view>
							<uni-datetime-picker
								v-if="current == 1"
								returnType="timestamp"
								@change="change"
								v-model="range"
								type="daterange"
							>
								<view
									class="flex"
									@click="shoowo"
									style="padding: 5px 15px; background-color: #f7f9fa; border-radius: 15px"
								>
									<view style="font-size: 14px; color: #777979">到账日期：{{ dzrq }}</view>
									<image style="width: 12px; margin-left: 10px" src="/static/img/19.png" mode="widthFix"></image>
								</view>
							</uni-datetime-picker>
						</view>
					</view>

					<view @click="details(it)" v-for="(it, i) in rep_info.plist" class="project flex">
						<view class="flex">
							<image
								style="width: 50px; border-radius: 7px; margin-right: 10px"
								:src="imgurl + it.project.logo_image"
								mode="widthFix"
							></image>
							<view>
								<view class="tit_name">{{ it.project.title }}</view>
								<view class="tit_num">订单数：{{ it.num }}单</view>
							</view>
						</view>
						<view class="flex">
							<view class="tit_price">{{ it.sum }}元</view>
							<u-icon name="arrow-right" size="22"></u-icon>
						</view>
					</view>
				</view>
				<view v-if="current == 2">
					<view class="topbox team">
						<image class="topbox-bcg" src="@/static/image/4-2.png"></image>
						<view class="topbox-name">
							{{ '团队报表' }}
						</view>
						<view
							class="center"
							style="
								font-size: 13px;
								font-family: PingFang SC;
								font-weight: 400;
								color: #ffffff;
								line-height: 35px;
								margin-top: 18px;
								margin-left: 17px;
							"
						>
							<view>本月抽成补贴(元）</view>
							<view style="font-size: 28px; margin-left: 0.5em">
								{{ team_info.monthCommission == null ? 0 : team_info.monthCommission }}
							</view>
							<view>累计抽成补贴(元）{{ team_info.allCommission == null ? 0 : team_info.allCommission }}</view>
						</view>
						<view class="bottom"></view>
					</view>

					<view class="flex" style="justify-content: space-between; margin-top: 30px">
						<view style="font-size: 16px; font-weight: bold; color: #1d1f20">团队报表</view>
						<view>
							<uni-datetime-picker
								v-if="current == 2"
								type="daterange"
								v-model="range"
								@change="change"
								returnType="timestamp"
							>
								<view
									class="flex"
									@click="shoowo"
									style="padding: 5px 15px; background-color: #f7f9fa; border-radius: 15px"
								>
									<view style="font-size: 14px; color: #777979">到账日期：{{ dzrq }}</view>
									<image style="width: 12px; margin-left: 10px" src="/static/img/19.png" mode="widthFix"></image>
								</view>
							</uni-datetime-picker>
						</view>
					</view>
					<view style="margin-top: 15px">
						<u-search
							bgColor="#F7F9FA"
							:showAction="true"
							@custom="search"
							@search="search"
							v-model="keyword"
							placeholder="搜索"
							actionText="搜索"
							:animation="true"
						></u-search>
						<view style="margin-top: 15px; border-radius: 10px">
							<u-steps direction="column" dot activeColor="#6F88FF" inactiveColor="#6F88FF">
								<u-steps-item v-for="(it, i) in team_info.list" :key="i">
									<view slot="desc" class="iy" style="background-color: #f7f9fa; border-radius: 0 0 10px 10px">
										<image class="bcg" src="/static/image/4-3.png"></image>
										<view class="iy-wrap">
											<view class="username">代理：{{ it.subuser.username }}</view>
											<view class="flex data" style="justify-content: space-around; height: 68px">
												<view class="item">
													<view>结算数量</view>
													<view>{{ it.num }}单</view>
												</view>
												<view class="item">
													<view>抽成补贴</view>
													<view>{{ it.sum }}元</view>
												</view>
												<view class="item">
													<view>明细</view>
													<view @click="take(it)" style="color: #ff3331 !important">查看</view>
												</view>
											</view>
										</view>
									</view>
								</u-steps-item>
							</u-steps>
						</view>
					</view>
				</view>
			</view>
			<!-- <view style="position: fixed;bottom: 7%;left: 50%;transform: translateX(-50%);z-index: -1;">
				<image style="width: 73px;" :src="imgurl + com_info.logo" mode="widthFix"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	import config from '@/common/config/index.js';
	export default {
		data() {
			return {
				current: 1,
				range: [],
				imgurl: config.imgurl,
				com_info: '',
				stime: '',
				rep_info: '',
				etime: '',
				time: '',
				team_info: '',
				keyword: '',
				tipsItem: -1,
				art: 0,
			};
		},
		onLoad() {
			this.common();
		},
		onShow() {
			this.tipsItem = -1;
			this.dzrq = uni.$u.timeFormat('', 'yyyy-mm-dd');
			uni.$on('update', this.times);
			this.report();
		},
		onPageScroll(e) {
			if (e.scrollTop >= 44) {
				this.art = 1;
			} else {
				this.art = 0;
			}
		},
		methods: {
			shoowo() {
				uni.$emit('qieh', {
					msg: 0,
				});
			},
			times(e) {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				date.setMonth(month);
				date.setDate('1');
				// 获取本月最后一天
				let dd = date.setDate(date.getDate() - 1);
				let els = uni.$u.timeFormat(dd, 'yyyy-mm-dd');

				this.stime = '';
				this.etime = '';
				this.range = [];
				this.dzrq = uni.$u.timeFormat('', 'yyyy-mm-dd');
				let that = this;
				if (e.msg.name == '今日') {
					that.time = 'today';
					this.dzrq = uni.$u.timeFormat('', 'yyyy-mm-dd');
				} else if (e.msg.name == '昨日') {
					that.time = 'yesterday';
					this.dzrq = year + '-' + month + '-' + day + '至' + year + '-' + month + '-' + (day - 1);
				} else {
					that.time = 'month';
					this.dzrq = year + '-' + month + '-' + '01' + '至' + els;
				}
				if (that.current == 1) {
					that.report();
				} else {
					that.teamreports();
				}
			},
			async common() {
				let res = await this.$http.index.index();
				if (res.code == 1) {
					this.com_info = res.data;
				}
			},
			details(it) {
				uni.navigateTo({
					url:
						'/pages/report/detail?project_id=' +
						it.project_id +
						'&time=' +
						this.time +
						'&stime=' +
						this.stime +
						'&etime=' +
						this.etime,
				});
			},
			btn(i) {
				uni.$emit('qieh', {
					msg: i,
				});
				this.range = [];
				this.time = '';
				this.stime = '';
				this.etime = '';
				this.current = i;
				if (i == 1) {
					this.report();
				} else {
					this.teamreports();
				}
			},
			search() {
				this.teamreports();
			},
			async teamreports() {
				let res = await this.$http.index.teamReport({
					stime: this.stime,
					etime: this.etime,
					time: this.time,
					search: this.keyword,
				});
				if (res.code == 1) {
					this.team_info = res.data;
				}
			},
			async report() {
				let res = await this.$http.index.myReport({
					stime: this.stime,
					etime: this.etime,
					time: this.time,
				});
				if (res.code == 1) {
					this.rep_info = res.data;
				}
			},
			change(e) {
				this.time = '';
				this.stime = e[0] / 1000;
				this.etime = e[1] / 1000;
				this.dzrq = uni.$u.timeFormat(this.stime, 'yyyy-mm-dd') + '-' + uni.$u.timeFormat(this.etime, 'yyyy-mm-dd');
				if (this.current == 1) {
					this.report();
				} else {
					this.teamreports();
				}
			},
			take(it) {
				uni.navigateTo({
					url:
						'/pages/report/take?sub_id=' +
						it.sub_user_id +
						'&name=' +
						it.subuser.username +
						'&time=' +
						this.time +
						'&stime=' +
						this.stime +
						'&etime=' +
						this.etime,
				});
			},
			btn_flag(id) {
				if (this.tipsItem == id) {
					this.tipsItem = -1;
				} else {
					this.tipsItem = id;
				}
			},
		},
	};
</script>
<style>
	/* page {
		background-color: #F7F9FA;
	} */
</style>

<style scoped lang="scss">
	/deep/ .u-sticky {
		top: 0 !important;
	}

	.tops {
		background-image: url('@/static/img/73.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 10000;
		// box-shadow: rgb(237, 240, 242) 0px 0px 6px 1px;
	}

	.iy {
		position: relative;
		top: -10px;
		border-radius: 10px;
		border-bottom: 1px solid #f3f3f3;
		background-color: transparent !important;
		font-size: 13px;
		.bcg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
		}
		.iy-wrap {
			padding: 22px 30px;
		}
		.username {
			margin-bottom: 13px;
			font-weight: bold;
			color: #333333;
			line-height: 13px;
		}
		.data {
			border: 1px solid #d3d3d3;
			border-radius: 5px;
			background-color: #fcfcfc;
			.item {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				text-align: center;
				> view:nth-child(1) {
					font-weight: bold;
				}
			}
		}
	}

	.req {
		width: 25%;
		text-align: center;
		padding: 15px 0;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
	}

	.reqs {
		width: 25%;
		text-align: center;
		padding: 15px 0;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1d1f20;
		border-bottom: 1px solid #f3f3f3;

		&:last-child {
			border-bottom: none;
		}
	}

	.tit_name {
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.tit_num {
		font-size: 13px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666;
		margin-top: 5px;
	}

	.tit_price {
		font-size: 14px;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #ec6251;
		margin-right: 10px;
	}

	.project {
		padding: 15px 10px;
		background: #ffffff;
		box-shadow: 0px 0px 6px 1px #edf0f2;
		border-radius: 10px 10px 10px 10px;
		margin-top: 15px;
		justify-content: space-between;
	}

	.yit {
		width: 33.33%;
		text-align: center;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1d1f20;
	}

	.wit {
		font-size: 14px;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #ff3331;
		width: 33.33%;
		text-align: center;
	}

	/deep/ .uni-date {
		border-radius: 15px;
	}

	.name {
		background: #ffffff;
		border-radius: 12px;
		font-weight: bold !important;
		color: #2e48f5 !important;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.contant {
		.vote {
			background-image: url('@/static/img/6.png');
			background-size: 100%;
			background-repeat: no-repeat;
			width: 100%;
			position: fixed;
			height: 100%;
		}
	}

	.tips {
		background-color: #ff3331;
		padding: 13px 15px 8px;
		font-size: 12px;
		color: #ffffff;
		position: absolute;
		width: 150px;
		left: -850%;
		top: 110%;
		z-index: 20;
		border-radius: 10px;
	}

	.topbox {
		position: relative;
		height: 194px;
		overflow: hidden;
		&-name {
			position: absolute;
			top: 4px;
			right: 0;
			width: 24.5%;
			height: 12px;
			font-size: 12px;
			font-weight: bold;
			color: #bb7154;
			text-align: center;
		}
		.topbox-bcg {
			position: absolute;
			z-index: -1;
			top: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
		}
		.bottom {
			display: flex;
			justify-content: space-between;
			padding: 5px 20px;
			height: 55px;
			position: absolute;
			width: 100%;
			bottom: 0;
			box-sizing: border-box;
			font-size: 12px;
			color: #e1e1e1;
			line-height: 12px;
			text-align: center;
			.item {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				> view:nth-child(2) {
					color: #fff;
					font-size: 14px;
				}
			}
		}
	}
	.topbox.team {
		height: 154px;
	}
	/deep/ .u-steps-item__wrapper {
		background-color: transparent;
	}
	/deep/ .u-steps-item__line--column {
		background: #d8d8d8 !important;
	}
</style>
